﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@*@section styles{
    <link href="~/Content/zTree.min.css" rel="stylesheet" />
    <style>
        .ztree li span {
            font-size: 14px;
        }
    </style>
}*@
<!-- demo root element -->
    <div id="app" class="box box-primary">
        <div class="box-header with-border">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/Role/Index"><i class="fa fa-dashboard"></i>角色管理</a></li>
                <li class="active"><a href="/Role/Create">新增角色</a></li>
            </ol>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <!--<form v-on:submit.prevent="onSubmit">
    <div class="box-body">
        <v-form v-bind:valid.sync="valid">
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <v-input type="text" label="角色名：" v-bind:value.sync="model.name" placeholder="角色名" required icon></v-input>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-4 col-xs-4">
                    <label for="inputPassword3" class="control-label">角色描述：</label>
                    <textarea class="form-control" v-model="model.description"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-2 col-xs-2">
                    <label for="inputPassword3" class="control-label">权限配置：</label>
                    <ul id="ztree" class="ztree"></ul>
                </div>
            </div>
        </v-form>
    </div>
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <button type="submit" class="btn btn-warning btn-flat" v-bind:disabled="!valid">保 存</button>
                    <a class="btn btn-default btn-flat" href="/Role/Index">取 消</a>
                </div>
            </div>
        </div>
        </form>-->

        <el-form v-bind:model="ruleForm" v-bind:rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色名" prop="name">
                <el-col v-bind:span="6">
                    <el-input v-model="ruleForm.name" size="small" placeholder="角色名"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
                <el-col v-bind:span="6">
                    <el-input type="textarea" v-model="ruleForm.description" placeholder="角色描述"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="权限配置">
                <el-tree ref="tree" v-bind:data="data2"
                         show-checkbox
                         node-key="Key"
                         v-bind:props="defaultProps">
                </el-tree>  
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="submitForm('ruleForm')" v-bind:disabled="isSubmit">保存</el-button>
                <el-button v-on:click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>

    </div>
@section scripts{
    @*<script src="~/Scripts/jquery.ztree.all-3.5.min.js"></script>*@
    <script>
        $("doucument").ready(function () {
            var zNodes =@Html.Raw(ViewBag.menuTree) ;
            var demo = new Vue({
                components: {
                },
                el: '#app',
                data: {
                    valid: false,
                    isSubmit: false,
                    //model: {
                    //    name: '',
                    //    description:'',
                    //    menuIds:''
                    //},
                    data2: zNodes,
                    defaultProps: {
                        children: 'Children',
                        label: 'Label'
                    },
                    ruleForm: {
                        name: '',
                        description: '',
                        menuIds: ''
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入角色名', trigger: 'blur' }
                            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ]
                    }
                },
                methods: {
                    //onSubmit: function () {
                    //    //获取选择节点
                    //    var nodes = zTreeObj.getCheckedNodes(true);
                    //    if(nodes.length==0){
                    //        bootbox.alert("请勾选权限");
                    //        return;
                    //    }
                    //    var v_data = this.model;
                    //    nodes.forEach(function(item){
                    //        v_data.menuIds+= item.id+",";
                    //    });
                    //    v_data.menuIds= v_data.menuIds.substring(0,v_data.menuIds.length-1);

                    //    $.post("/Role/Create", v_data, function (result) {
                    //        if (result.success) {
                    //            bootbox.alert("保存成功！", function () {
                    //                window.location.href = "/Role/Index";
                    //            });
                    //        }
                    //        else {
                    //            bootbox.alert(result.error);
                    //        }
                    //    }, "json");
                    //}

                    submitForm(formName) {
                        var v_data = this.ruleForm;
                        v_data.menuIds = this.$refs.tree.getCheckedKeys();
                        var menuIdsParent =this.$refs.tree.getHalfCheckedKeys();
                        v_data.menuIds = $.merge(v_data.menuIds, menuIdsParent);  
                        if (v_data.menuIds.length == 0) {
                            this.$message({
                                type: 'error',
                                message: '"请勾选权限"'
                            });
                            return;
                        }
                        v_data.menuIds = v_data.menuIds.toString();
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                //防止重复提交
                                this.isSubmit = true;
                                $.post("/Role/Create", v_data, function (result) {
                                    if (result.success) {
                                        //bootbox.alert("保存成功！", function () {
                                        //    window.location.href = "/Role/Index";
                                        //});
                                        demo.$alert('保存成功', '成功', {
                                            confirmButtonText: '确定',
                                            callback: action => {
                                                window.location.href = "/Role/Index";
                                            }
                                        });
                                    }
                                    else {
                                        //bootbox.alert(result.error);
                                        demo.$message({
                                            type: 'error',
                                            message: result.error
                                        });
                                    }
                                }, "json");
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                        //防止重复提交
                        this.isSubmit = false;
                    },
                    resetForm(formName) {
                        window.location.href = "/Role/Index";
                    }
                }
            });
            @*var zTreeObj;
            // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
            var setting = {
                check: {
                    enable:true
                },
                data: {
                    simpleData: {
                        enable: true,
                        rootPId: 0
                    }
                }
            };
            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
            var zNodes =@Html.Raw(ViewBag.menuTree) ;
            // tree
            zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);*@

        });



    </script>
}

